<!-- 我的已选 -->

<template>
  <div>
    <div>已选择用户 ({{ info.right.idList.length }}/{{ model.length }})</div>

    <el-input v-model="filter" suffix-icon="el-icon-search" placeholder="用户名称" clearable />

    <WebTable v-bind="tableProps">
      <RowCheckbox :disabled="info.disabled" />
      <RowText label="用户名称" bind="name" left />
      <RowText label="联系方式" bind="phone" left :minWidth="100" />
      <RowSlot :label="`所属${CORE.MAP.ORGAN}`" :minWidth="120" left>
        <template #default="{ row }">
          <div>{{ getOrganNames(row) }}</div>
        </template>
      </RowSlot>
    </WebTable>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixChosen from '@admin/components/choose/mixChosen'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyChosen',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixChosen, CORE.mixTree('organ', 'organ_')],

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 获取组织名称串
     */
    getOrganNames({ organId = [] }) {
      const { organ_treeMap } = this
      const nameList = organId.map((id) => (organ_treeMap[id] || {}).name || '')
      return nameList.join(', ')
    },
  },
}
</script>
